<template>
    <div class="photoinfo">
        <h3 class="title">{{photoinfo.title}}</h3>
        <p class="info">
            <span>发表时间：{{photoinfo.add_time|dateFormat}}</span>
            <span>点击次数：{{photoinfo.click}}</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumb-img-list"> 
        <vue-preview :slides="photolist" @click="handleClose"></vue-preview>
        </div>
        <!-- 内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <!-- 在使用评论子组件的时候，必须使用一个newsid来传值 -->
        <comment :newsid="id"></comment>




    </div>
</template>


<script>
import comment from '../sub-components/Comment.vue'
export default {
    data(){
        return{
            photoinfo:{},//图片信息
            photolist:[]//缩略图的数组
        }
    },
    created(){
        this.getPhotoInfo(),
        this.getThumbImg()
    },
    methods:{
        // 当使用异步方法时，并且这个异步方法返回一个promise对象的时候才可以使用async和await
        async getPhotoInfo(){
            const {data}=await this.$http.get("/api/getimageInfo/"+this.id)
            if(data.status==0)return (this.photoinfo=data.message[0])

        },
        async getThumbImg(){
            // 获取图片的缩略图数据
            const {data}=await this.$http.get('/api/getthumimages/'+this.id)
            if(data.status==0)
            {
                // 为每一张图片设置宽和高
                data.message.forEach(item => {
                item.msrc = item.src;
                item.w = 600;
                item.h = 400;
                });
            }
            this.photolist=data.message
        },
        handleClose () {
        console.log('close event')
      }

    },
    props:["id"],
    components:{
        comment
    }
}
</script>


<style lang="scss" scoped>
.photoinfo{
    padding:3px;
}
.title{
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    color: #26A2FF;
}
.info{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.content{
    font-size: 13px;
    line-height: 30px;
}
.thumb-img-list{
  /deep/ .my-gallery{
     display: flex;
      flex-wrap: wrap; //默认换行
      figure {
        width: 30%;
        margin: 5px;
        img {
          width: 100%;
          box-shadow: 0 0 8px #999;
          border-radius: 5px;
        }
      }
}

}
</style>